<template>
	<view class="order-submission">
		<view class="allAddress" :style="systemStore ? '' : 'padding-top: 0.2*100rpx'">
			<view class="address acea-row row-between-wrapper" v-if="shipping_type === 0" @click="addressTap">
				<view class="addressCon" v-if="addressInfo.realName">
					<view class="name">
						{{ addressInfo.realName }}
						<text class="phone">{{ addressInfo.phone }}</text>
					</view>
					<view>
						<text class="default font-color-red" v-if="addressInfo.isDefault">[默认]</text>
						{{ addressInfo.province }}{{ addressInfo.city}}{{ addressInfo.district }}{{ addressInfo.detail }}
					</view>
				</view>
				<view class="addressCon" v-else>
					<view class="setaddress">设置收货地址</view>
				</view>
				<view class="iconfont icon-jiantou"></view>
			</view>
			<div class="address acea-row row-between-wrapper" v-if="shipping_type === 1" @click="showStoreList">
				<div class="addressCon" v-if="storeItems">
					<div class="name">
						{{ storeItems.name }}
						<span class="phone">{{storeItems.phone }}</span>
					</div>
					<div>{{ storeItems.address}}</div>
				</div>
				<div class="addressCon" v-else>
					<div class="name">
						{{ systemStore.name }}
						<span class="phone">{{systemStore.phone}}</span>
					</div>
					<div>{{ systemStore.address }}</div>
				</div>
				<div class="iconfont icon-jiantou"></div>
			</div>
			<view class="line">
				<image src="https://h5.ylsp.vip/file/static/images/line.jpg" />
			</view>
		</view>
		<OrderGoods :evaluate="0" :cartInfo="orderGroupInfo.cartInfo"></OrderGoods>
		<view class="wrapper">
			<!-- <view class="item acea-row row-between-wrapper" @click="couponTap" v-if="deduction === false">
        <view>优惠券</view>
        <view class="discount">
          {{ usableCoupon.couponTitle || "请选择" }}
          <text class="iconfont icon-jiantou"></text>
        </view>
      </view> -->
			<view class="item acea-row row-between-wrapper" v-if="shipping_type === 0">
				<view>快递费用</view>
				<view class="discount">
					{{ orderGroupInfo.priceGroup.storePostage > 0 ? orderGroupInfo.priceGroup.storePostage : "免运费" }}
				</view>
			</view>
			<view v-if="shipping_type === 1">
				<view class="item acea-row row-between-wrapper">
					<view>联系人</view>
					<view class="discount">
						<input type="text" placeholder="请填写您的联系姓名" v-model="contacts" />
					</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view>联系电话</view>
					<view class="discount">
						<input type="text" placeholder="请填写您的联系电话" v-model="contactsTel" />
					</view>
				</view>
			</view>
			<view class="item">
				<view>备注信息（150字以内）</view>
				<textarea v-model="mark" placeholder="请输入备注信息"></textarea>
			</view>
		</view>
		<view class="wrapper">
			<view class="item">
				<view>支付方式</view>
				<view class="list">
					<view class="payItem acea-row row-middle" :class="active === 'weixin' ? 'on' : ''"
						@click="payItem('weixin')" v-show="isWeixin && showWechatPayment == 1">
						<view class="name acea-row row-center-wrapper">
							<view class="iconfont icon-weixinzhifu" :class="active === 'weixin' ? 'bounceIn' : ''">
							</view>微信支付
						</view>
						<view class="tip">微信快捷支付</view>
					</view>
					<view class="payItem acea-row row-middle" :class="active === 'weixin' ? 'on' : ''"
						@click="payItem('weixin')" v-show="!isWeixin && showWechatPayment == 1">
						<view class="name acea-row row-center-wrapper">
							<view class="iconfont icon-weixinzhifu" :class="active === 'weixin' ? 'bounceIn' : ''">
							</view>微信支付
						</view>
						<view class="tip">微信快捷支付</view>
					</view>
					<view class="payItem acea-row row-middle" :class="active === 'yue' ? 'on' : ''"
						@click="payItem('yue')" v-show="showIntegralPayment == 1">
						<view class="name acea-row row-center-wrapper">
							<view class="iconfont icon-ziyuan-xianxing" :class="active === 'yue' ? 'bounceIn' : ''"></view>
							积分抵扣
						</view>
						<view class="tip">可用积分：{{ userInfo.nowMoney || 0 }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="moneyList">
			<view class="item acea-row row-between-wrapper" v-if="orderPrice.totalPrice !== undefined">
				<view>应付金额：</view>
				<view class="money">￥{{ orderPrice.totalPrice }}</view>
			</view>
			<view class="item acea-row row-between-wrapper" v-if="orderPrice.payPostage > 0">
				<view>运费：</view>
				<view class="money">￥{{ orderPrice.payPostage }}</view>
			</view>
			<view class="item acea-row row-between-wrapper" v-if="orderPrice.couponPrice > 0">
				<view>优惠券抵扣：</view>
				<view class="money">-￥{{ orderPrice.couponPrice }}</view>
			</view>
			<view class="item acea-row row-between-wrapper" v-if="orderPrice.deductionPrice > 0">
				<view>积分抵扣：</view>
				<view class="money">-￥{{ orderPrice.deductionPrice }}</view>
			</view>
			
			<view class="item acea-row row-between-wrapper" v-if="commissionSum > 0">
				<view>分润扣减：</view>
				<view class="money">-￥{{ commissionSum }}</view>
			</view>
		</view>
		<view style="height:120rpx"></view>
		<view class="footer acea-row row-between-wrapper">
			<view class="total">
				合计:
				<text class="font-color-red">￥{{ orderPrice.payPrice }}</text>
			</view>
			<view class="settlement" @click="createOrder">立即结算</view>
		</view>
		<CouponListWindow v-on:couponchange="changecoupon($event)" v-model="showCoupon" :price="orderPrice.totalPrice"
			:checked="usableCoupon.id" @checked="changeCoupon" :cartid="cartid"></CouponListWindow>
		<AddressWindow @checked="changeAddress" @redirect="addressRedirect" v-model="showAddress"
			:checked="addressInfo.id" ref="mychild"></AddressWindow>
	</view>
</template>

<script>
	import OrderGoods from "@/components/OrderGoods";
	import CouponListWindow from "@/components/CouponListWindow";
	import AddressWindow from "@/components/AddressWindow";
	import {
		postOrderConfirm,
		postOrderComputed,
		createOrder
	} from "@/api/order";
	import {
		mapGetters
	} from "vuex";
	import {
		handleOrderPayResults,
		subscribeMessage
	} from "@/libs/order";
	import {
		weappPay
	} from "@/libs/wechat";
	import {
		isWeixin,
		handleErrorMessage
	} from "@/utils";

	const NAME = "OrderSubmission",
		_isWeixin = isWeixin();
	export default {
		name: NAME,
		components: {
			OrderGoods,
			CouponListWindow,
			AddressWindow,
		},
		props: {},
		data: function() {
			return {
				showIntegralPayment: '',
				showWechatPayment: '',
				offlinePayStatus: 2,
				from: this.$deviceType,
				deduction: true,
				enableIntegral: true,
				enableIntegralNum: 0,
				isWeixin: _isWeixin,
				pinkId: 0,
				active: '',
				showCoupon: false,
				showAddress: false,
				commissionSum: 0,
				addressInfo: {},
				couponId: 0,
				orderGroupInfo: {
					priceGroup: {},
				},
				usableCoupon: {},
				addressLoaded: false,
				useIntegral: false,
				orderPrice: {
					payPrice: "计算中",
				},
				mark: "",
				systemStore: {},
				shipping_type: 0,
				contacts: "",
				contactsTel: "",
				storeSelfMention: 0,
				cartid: "",
			};
		},
		computed: mapGetters(["userInfo", "storeItems"]),
		watch: {
			useIntegral() {
				this.computedPrice();
			},
			$yroute(n) {
				if (n.name === NAME) this.getCartInfo();
			},
			shipping_type() {
				this.computedPrice();
			},
		},
		onShow: function() {
			let that = this;
			this.$store.dispatch("getUser", true);
			that.getCartInfo();
			if (that.$yroute.query.pinkid !== undefined) {
				that.pinkId = that.$yroute.query.pinkid;
			}
			if (that.$yroute.query.id !== undefined) {
				that.cartid = that.$yroute.query.id;
			}
			that.showIntegralPayment = that.$store.getters.showIntegralPayment
			that.showWechatPayment = that.$store.getters.showWechatPayment
			if(that.showWechatPayment == 1 && that.showIntegralPayment == 1){
				that.active = 'weixin'
			}else{
				if(that.showIntegralPayment == 0){
					that.active = 'weixin'
				}else{
					that.active = 'yue'
				}
			}
			
		},
		methods: {
			showStoreList() {
				this.$store.commit("get_to", "orders");
				this.$yrouter.push({
					path: "/pages/shop/StoreList/index",
				});
			},
			addressType: function(index) {
				if (index && !this.systemStore.id) {
					uni.showToast({
						title: "暂无门店信息，您无法选择到店自提！",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				this.shipping_type = index;
			},
			changeUseIntegral: function(e) {
				this.useIntegral = e.mp.detail.value[0];
			},
			computedPrice() {
				let shipping_type = this.shipping_type;
				postOrderComputed(this.orderGroupInfo.orderKey, {
					addressId: this.addressInfo.id,
					productId: this.orderGroupInfo.cartInfo[0].productId,
					cartNum: this.orderGroupInfo.cartInfo[0].cartNum,
					useIntegral: this.useIntegral ? 1 : 0,
					couponId: this.usableCoupon.id || 0,
					shipping_type: parseInt(shipping_type) + 1,
				}).then((res) => {
					const data = res.data;
					console.log(res.data)
					this.commissionSum = res.data.commissionSum;
					if (data.status === "EXTEND_ORDER") {
						this.$yrouter.replace({
							path: "/pages/order/OrderDetails/index",
							query: {
								id: data.result.orderId,
							},
						});
					} else {
						this.orderPrice = data.result;
					}
				});
			},
			getCartInfo() {
				const cartIds = this.$yroute.query.id;
				if (!cartIds) {
					uni.showToast({
						title: "参数有误",
						icon: "none",
						duration: 2000,
					});
					return this.$yrouter.back();
				}
				postOrderConfirm(cartIds)
					.then((res) => {
						this.offlinePayStatus = res.data.offline_pay_status;
						this.orderGroupInfo = res.data;
						console.log(1)
						console.log(res.data)
						this.deduction = res.data.deduction;
						this.usableCoupon = res.data.usableCoupon || {};
						this.addressInfo = res.data.addressInfo || {};
						// 用来显示到店自提的店铺地址
						this.systemStore = res.data.systemStore || {};
						this.storeSelfMention = res.data.storeSelfMention;
						this.computedPrice();
					})
					.catch(() => {});
			},
			addressTap: function() {
				this.showAddress = true;
				if (!this.addressLoaded) {
					this.addressLoaded = true;
					this.$refs.mychild.getAddressList();
				}
			},
			addressRedirect() {
				this.addressLoaded = false;
				this.showAddress = false;
			},
			couponTap: function() {
				this.showCoupon = true;
			},
			changeCoupon: function(coupon) {
				if (!coupon) {
					this.usableCoupon = {
						couponTitle: "不使用优惠券",
						id: 0,
					};
				} else {
					this.usableCoupon = coupon;
				}
				this.computedPrice();
			},
			payItem: function(index) {
				this.active = index;
			},
			changeAddress(addressInfo) {
				this.addressInfo = addressInfo;
				this.computedPrice();
			},
			createOrder() {
				let shipping_type = this.shipping_type;
				if (!this.active) {
					uni.showToast({
						title: "请选择支付方式",
						icon: "none",
						duration: 3000,
					});
					return;
				}
				if (!this.addressInfo.id && !this.shipping_type) {
					uni.showToast({
						title: "请选择收货地址",
						icon: "none",
						duration: 3000,
					});
					return;
				}
				if (this.shipping_type) {
					if (
						(this.contacts === "" || this.contactsTel === "") &&
						this.shipping_type
					) {
						uni.showToast({
							title: "请填写联系人或联系人电话",
							icon: "none",
							duration: 3000,
						});
						return;
					}
					if (!/^1(3|4|5|7|8|9|6)\d{9}$/.test(this.contactsTel)) {
						uni.showToast({
							title: "请填写正确的手机号",
							icon: "none",
							duration: 3000,
						});
						return;
					}
					if (!/^[\u4e00-\u9fa5\w]{2,16}$/.test(this.contacts)) {
						uni.showToast({
							title: "请填写您的真实姓名",
							icon: "none",
							duration: 3000,
						});
						return;
					}
				}
				let from = {};
				if (this.$deviceType == "app") {
					from.from = "app";
				}
				// #ifdef MP-WEIXIN
				subscribeMessage()
				let active = this.active;
				
				console.log(this.active)

				// #endif
				
				// #ifdef H5
				let active = this.active;
				
				// #endif
				
				if(active == 'yue'){
					if(this.userInfo.nowMoney <= 0){
						uni.showToast({
							title: "您的积分不足！",
							icon: "none",
							duration: 3000,
						});
						return;
					}else{
						if(this.orderPrice.payPrice > this.userInfo.nowMoney){
							uni.showToast({
								title: "您的积分不足！",
								icon: "none",
								duration: 3000,
							});
							return;
						}
					}
				}

				uni.showLoading({
					title: "生成订单中",
				});
				console.log('地址信息：' + JSON.stringify(this.addressInfo))
				createOrder(this.orderGroupInfo.orderKey, {
						realName: this.contacts,
						phone: this.contactsTel,
						commissionSum: this.commissionSum,
						addressId: this.addressInfo.id,
						useIntegral: this.useIntegral ? 1 : 0,
						couponId: this.usableCoupon.id || 0,
						payType: active,
						pinkId: this.pinkId,
						seckillId: this.orderGroupInfo.seckill_id,
						combinationId: this.orderGroupInfo.combinationId,
						bargainId: this.orderGroupInfo.bargain_id,
						from: this.from,
						mark: this.mark || "",
						shippingType: parseInt(shipping_type) + 1,
						storeId: this.storeItems ? this.storeItems.id : this.systemStore.id,
						...from,
					})
					.then((res) => {
						uni.hideLoading();
						console.log(res.data)
						handleOrderPayResults.call(this, res.data, "create", this.active);
					})
					.catch((err) => {
						console.log(err)
						handleErrorMessage(err, "创建订单失败");
						
					});
			},
		},
	};
</script>

<style scoped lang="less">
	.footer {
		.total {
			font-weight: 900;
			font-size: 30rpx;
		}
	}

	.order-submission .wrapper .shipping select {
		color: #999;
		padding-right: 0.15 * 100rpx;
	}

	.order-submission .wrapper .shipping .iconfont {
		font-size: 0.3 * 100rpx;
		color: #515151;
	}

	.order-submission .allAddress {
		width: 100%;

	}

	.order-submission .allAddress .nav {
		margin: 0 auto;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.order-submission .allAddress .nav .item {
		flex: 1;
		position: relative;
	}

	.order-submission .allAddress .nav .item.on {
		position: relative;
	}

	.order-submission .allAddress .nav .item.on:before {
		position: absolute;
		bottom: 0;
		content: "快递配送";
		font-size: 0.28 * 100rpx;
		display: block;
		height: 0;
		left: 0;
		right: 0;
		border-width: 0.4 * 100rpx;
		border-style: solid;
		border-color: #fff;
		z-index: 9;
		text-align: center;
		line-height: 0.14 * 100rpx;
	}

	.order-submission .allAddress .nav .item:nth-of-type(2).on:before {
		content: "到店自提";
		border-width: 0.4 * 100rpx;
	}

	.order-submission .allAddress .nav .item.on2 {
		position: relative;
	}

	.order-submission .allAddress .nav .item.on2:before {
		position: absolute;
		bottom: 0;
		content: "到店自提";
		font-size: 0.28 * 100rpx;
		display: block;
		height: 0;
		left: 0;
		right: 0;
		border-width: 0.4 * 100rpx;
		border-style: solid;
		border-color: #d5e6e6;
		text-align: center;
		line-height: 0.14 * 100rpx;
	}

	.order-submission .allAddress .nav .item:nth-of-type(1).on2:before {
		content: "快递配送";
		border-width: 0.4 * 100rpx;
	}

	.order-submission .allAddress .address {
		height: 1.5 * 100rpx;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.order-submission .allAddress .line {
		width: 7.1 * 100rpx;
		margin: 0 auto;
	}

	.order-submission .wrapper .item .discount input::placeholder {
		color: #ccc;
	}
</style>
